<script setup lang="ts">
import { ref } from 'vue'
import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from '@/services/address'
import { onLoad } from '@dcloudio/uni-app';

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
    receiver: {
        rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
    },
    contact: {
        rules: [
            { required: true, errorMessage: '请输入联系方式' },
            { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
        ],
    },
    fullLocation: {
        rules: [{ required: true, errorMessage: '请选择所在地区' }],
    },
    address: {
        rules: [{ required: true, errorMessage: '请选择详细地址' }],
    },
}

// 获取表单组件实例，用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()

// 表单数据
const formData = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
})
// 获取页面参数
const query = defineProps<{
    id?: string
}>()
// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
    formData.value.fullLocation = e.detail.value.join(" ")
    formData.value.provinceCode = e.detail.code![0],
        formData.value.cityCode = e.detail.code![1],
        formData.value.countyCode = e.detail.code![2]
}
const onSwithChange: UniHelper.SwitchOnChange = (e) => {
    formData.value.isDefault = e.detail.value ? 1 : 0
}
const getMemberAddressById = async () => {
    if (query.id) {
        const res = await getMemberAddressByIdAPI(query.id)
        const { receiver, contact, fullLocation, cityCode, provinceCode, countyCode, address, isDefault } = res.result
        Object.assign(formData.value, { receiver, contact, fullLocation, provinceCode, cityCode, countyCode, address, isDefault })
    }
}
//保存或提交地址信息
const onSubmit = async () => {
    try {
        // 表单校验
        await formRef.value?.validate!()

        // const { receiver, contact, provinceCode, cityCode, countyCode, address, isDefault } = formData.value
        if (query.id) {
            // 修改地址
            await putMemberAddressByIdAPI(query.id, formData.value)
        } else {
            // 新建地址
            await postMemberAddressAPI(formData.value)

        }

        uni.showToast({ icon: "none", title: query.id ? "修改成功" : "添加成功" })
        setTimeout(() => {
            uni.navigateBack()
        }, 500);
    } catch (error) {
        uni.showToast({ icon: 'error', title: '请填写完整信息' })
    }

}
onLoad(() => {
    getMemberAddressById()
})
</script>

<template>
    <view class="content">
        <uni-forms :rules="rules" :model="formData" ref="formRef">
            <!-- 表单内容 -->
            <uni-forms-item class="form-item" name="reciver">
                <text class="label">收货人</text>
                <input class="input" placeholder="请填写收货人姓名" v-model="formData.receiver" />
            </uni-forms-item>
            <uni-forms-item class="form-item" name="contact">
                <text class="label">手机号码</text>
                <input class="input" placeholder="请填写收货人手机号码" v-model="formData.contact" />
            </uni-forms-item>
            <uni-forms-item class="form-item" name="fullLocation">
                <text class="label">所在地区</text>
                <picker class="picker" mode="region" :value="formData.fullLocation.split(' ')" @change="onRegionChange">
                    <view v-if="formData.fullLocation">{{ formData.fullLocation }}</view>
                    <view v-else class="placeholder">请选择省/市/区(县)</view>
                </picker>
            </uni-forms-item>
            <uni-forms-item class="form-item" name="address">
                <text class="label">详细地址</text>
                <input class="input" placeholder="街道、楼牌号等信息" v-model="formData.address" />
            </uni-forms-item>
            <uni-forms-item class="form-item">
                <label class="label">设为默认地址</label>
                <switch @change="onSwithChange" class="switch" color="#27ba9b" :checked="formData.isDefault == 1" />
            </uni-forms-item>
        </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
page {
    background-color: #f4f4f4;
}

.content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item,
    .uni-forms-item {
        display: flex;
        align-items: center;
        min-height: 96rpx;
        padding: 25rpx 10rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;
        position: relative;
        margin-bottom: 0;

        // 调整 uni-forms 样式
        .uni-forms-item__content {
            display: flex;
        }

        .uni-forms-item__error {
            margin-left: 200rpx;
        }

        &:last-child {
            border: none;
        }

        .label {
            width: 200rpx;
            color: #333;
        }

        .input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .switch {
            position: absolute;
            right: -20rpx;
            transform: scale(0.8);
        }

        .picker {
            flex: 1;
        }

        .placeholder {
            color: #808080;
        }
    }
}

.button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}
</style>